<template>
  <div class="common-layout">
    <!-- title query -->
    <title-section
      :titleName="'质量检验方案'"
      :queryPlaceholder="'质量检验方案编码'"
      @query-change="queryChange"
    >
      <template #queryCom>
        <el-input
          v-model="form.qualityDetectionInspectionPlanName"
          clearable
          style="width: 150px; margin-left: 10px;"
          placeholder="质量检验方案"
        />
      </template>
      <template #btnCom>
        <el-button type="primary" @click="addChange">
          <i class="el-icon-plus"></i>添加
        </el-button>
      </template>
    </title-section>
    <!-- table -->
    <div class="table-info mes-table">
      <data-table
        ref="dataTableRef"
        :tableKey="tableKey"
        :isSelection="false"
        :isOperation="true"
        @sort-change="sortChange"
        @table-selection-change="tableSelectionChange"
      >
        <template #qualityDetectionInspectionPlanCode="{ row }">
          <el-link type="primary" @click="detailChange(row)">{{ row.qualityDetectionInspectionPlanCode }}</el-link>
        </template>
        <template #operationBtn="{ row }">
          <span
            style="cursor: pointer; color: #409eff; margin-right: 10px"
            @click="detailChange(row)"
            >详情</span
          >
          <span
            style="cursor: pointer; color: #e6a23c; margin-right: 10px"
            @click="updateChange(row)"
            >修改</span
          >
          <el-popconfirm
            placement="bottom-end"
            popper-class="my-popper-delete"
            title="是否确认删除该行数据"
            @confirm="deleteChange(row)"
          >
            <template #reference>
              <span class="pointer" style="color: #f54346">删除</span>
            </template>
          </el-popconfirm>
        </template>
      </data-table>
      <!-- 分页 -->
      <div class="table-pagination">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size.sync="pageSize"
          :page-sizes="[15, 30, 50, 80, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <dialog-com
      ref="addDialogComRef"
      :title="addTitle"
      :width="640"
      @confirm-change="confirmChange"
      @close-change="closeChange"
    >
      <template #content>
        <div style="margin: 10px 0">
          <el-form
            ref="inspectionInfoRef"
            :model="inspectionInfo"
            :rules="rulesForm"
            label-width="140px"
            class="demo-ruleForm"
          >
            <!-- 质量检验方案编码 -->
            <el-form-item
              label="质量检验方案编码"
              prop="qualityDetectionInspectionPlanCode"
            >
              <el-input
                v-model.trim="inspectionInfo.qualityDetectionInspectionPlanCode"
                placeholder="请输入质量检验方案编码"
              />
            </el-form-item>
            <!-- 质量检验方案 -->
            <el-form-item
              label="质量检验方案"
              prop="qualityDetectionInspectionPlanName"
            >
              <el-input
                v-model.trim="inspectionInfo.qualityDetectionInspectionPlanName"
                placeholder="请输入质量检验方案"
              />
            </el-form-item>
            <!-- 描述 -->
            <el-form-item label="描述" prop="remark">
              <el-input
                v-model="inspectionInfo.remark"
                placeholder="请输入描述"
                type="textarea"
                maxlength="200"
                show-word-limit
              />
            </el-form-item>
          </el-form>
          <el-divider style="margin: 10px 0;"></el-divider>
          <el-button style="margin-bottom: 10px;" type="primary" @click="addRow"
              ><i class="el-icon-plus"></i>添加一行</el-button>
          <!-- 添加 检验项目 检验指标 -->
          <el-form
            ref="inspectionInfoRef2"
            :model="qualityDetectionInspectionPlanDetails"
            label-width="140px"
            class="demo-ruleForm"
          >
            <el-table
              border
              :data="qualityDetectionInspectionPlanDetails"
              ref="inspectionTableRef"
              class="table v-table"
              style="width: 100%"
            >
              <!-- 序号列 -->
              <el-table-column type="index" label="序号" width="60" align="center" />
              <el-table-column label="检验项目">
                <template #default="scope">
                  <!--表格里面嵌套表单-->
                  <!-- 检验项目 -->
                  <el-form-item
                    :prop="scope.$index + `.qualityDetectionProjectId`"
                    class="not-need-form"
                    :rules="{
                      required: true,
                      message: '检验项目不能为空',
                      trigger: ['change', 'blur']
                    }"
                  >
                    <el-select
                      v-model="qualityDetectionInspectionPlanDetails[scope.$index].qualityDetectionProjectId"
                      placeholder="请选择质检指标所属项目"
                      filterable
                      @change="(value) => handleSelectChange(value, scope.$index)"
                    >
                      <el-option
                        v-for="item in inspectionProjectDataTemp"
                        :key="item.qualityDetectionProjectId"
                        :label="item.qualityDetectionProjectName"
                        :value="item.qualityDetectionProjectId"
                      />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <!-- 检验指标 -->
              <el-table-column label="检验指标">
                <template #default="scope">
                  <el-form-item
                    :prop="scope.$index + `.qualityDetectionIndicatorId`"
                    class="not-need-form"
                    :rules="{
                      required: true,
                      message: '检验指标不能为空',
                      trigger: ['change', 'blur']
                    }"
                  >
                    <el-select
                      v-model="qualityDetectionInspectionPlanDetails[scope.$index].qualityDetectionIndicatorId"
                      placeholder="请选择检验指标"
                      :disabled="!qualityDetectionInspectionPlanDetails[scope.$index].qualityDetectionProjectId"
                      filterable
                    >
                      <el-option
                        v-for="item in inspectionIndicatorsDataTemp.filter(item=> item.qualityDetectionProjectId === qualityDetectionInspectionPlanDetails[scope.$index].qualityDetectionProjectId)"
                        :key="item.qualityDetectionIndicatorId"
                        :label="item.qualityDetectionIndicatorName"
                        :value="item.qualityDetectionIndicatorId"
                      />
                    </el-select>
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="60">
                <template #default="scope">
                  <el-button
                    @click="handleDeleteRow(qualityDetectionInspectionPlanDetails[scope.$index])"
                    type="text"
                    style="color: #f54346;"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-form>
        </div>
      </template>
    </dialog-com>
  </div>
</template>

<script>
import TitleSection from "../../../componentsNew/TitleSection.vue";
import DataTable from "../../../componentsNew/DataTable.vue";
import DialogCom from "../../../componentsNew/DialogCom.vue";

import { myMethod } from "../../../uitils/qualityInspectionPlan.js";
export default {
  components: {
    TitleSection,
    DataTable,
    DialogCom,
  },
  data() {
    return {
      tableLoading: false,
      currentPage: 1,
      pageSize: 15,
      totalPage: 0,
      tableKey: [
        {
          value: "qualityDetectionInspectionPlanCode",
          name: "质量检验方案编码",
          minWidth: "120",
          slot: true,
        },
        {
          value: "qualityDetectionInspectionPlanName",
          name: "质量检验方案",
          minWidth: "180",
        },
        {
          value: "creator",
          name: "创建人",
          minWidth: "120",
        },
        {
          value: "createDate",
          name: "创建时间",
          minWidth: "250",
        },
      ],
      form: {},
      addTitle: "添加质量检验方案",
      inspectionInfo: {},
      rulesForm: {
        qualityDetectionInspectionPlanCode: [
          { required: true, message: "请输入质量检验方案编码", trigger: "blur" },
        ],
        qualityDetectionInspectionPlanName: [
          { required: true, message: "请输入质量检验方案", trigger: "blur" },
        ],
      },
      qualityDetectionInspectionPlanDetails: [
        { key: 0, qualityDetectionProjectId: null, qualityDetectionIndicatorId: null}
      ],
      inspectionProjectDataTemp: [],
      inspectionIndicatorsDataTemp: []
    };
  },
  created() {},
  mounted() {
    this.getTableData();
  },
  methods: {
    ...myMethod,
  },
};
</script>

<style lang="less" scoped>
@import "@/assets/css/index.less";
.el-dialog {
  .el-select {
    width: 100%;
  }
}
.add-table-row-btn.el-button {
  width: 100%;
  border-radius: 0 !important;
  height: 36px;
}
::v-deep {
  .not-need-form {
    .el-form-item__content {
      margin-left: 0 !important;
    }
  }
}
.not-need-form.el-form-item--default {
  margin-bottom: 13px !important;
  margin-top: 13px !important;
}
</style>

<style lang="less">
.my-popper-delete {
  width: 301px;
  border-radius: 8px;
  .el-popconfirm__main {
    width: 100%;
    font-size: 14px;
    font-weight: 400;
    text-align: left;
    color: #333333;
    line-height: 22px;
    margin: 10px 20px 10px 5px;
    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
  }
  button.el-button.el-button--mini {
    width: 122px !important;
  }
}
</style>
